﻿
.burger {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;   
  width: 70px;
  height: 70px; 
  z-index: 20;

  background-color: transparent;
  border: none;

  outline: none;
  }

	.burger-line {
	  display: block;
	  width: 50px;
	  height: 6px;
	  background-color: black;
	  margin-bottom: 12px;
	  transition: all 0.3s;
	  transform-origin: 0% 50%;
	}


	.burger.active .burger-line:nth-child(1) {
	  transform-origin: 0% 50%;
	  transform: rotate(45deg);
	}

	.burger.active .burger-line:nth-child(2) {
	  opacity: 0;
	}

	.burger.active .burger-line:nth-child(3) {
	  transform-origin: 0% 50%;
	  transform: rotate(-45deg);
	}

/* Format smartphone IPHONE 6/7/8 */
  @media screen and (max-width: 729px) {

    /**{
      outline: 2px dotted green;
    }*/

     .burger {
	    display: block;
	  }


	  .site-header-wrapper{
	  	width: 100%;
	  }


	  .nav{
	  	margin: 0;
		display: block;

        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;
        padding-top: 150px;
        background-color: rgba(0, 0, 0, 0.9);
 
        opacity: 0;
        transition: 0.5s;
        opacity: 0;
        transform: translateY(-100%);  

        flex-direction: column;
        justify-content: flex-start;
 

       	 }

        	.nav.active{   	  
	          opacity: 1;
	          transform: translateY(0%);
	          background-color: white;

      		  }


      		.nav a{
      			display: block;
      			margin-left: 30rem;
				font-size: 30px;

      		}
        	.icons-nav{
        		display: none;
        	}

.slide-article-content{
	width: 100%;
	padding-top: 0rem;
	margin-bottom: 10rem;
}

	  .site-slide-content{
	  	width: 100%;
	  	height: auto;
	  	display: block;

	  }


		  .image-site-slide{
		  	width: 100%;
		  }

		 	.image-site-slide img{
		 		height: 435rem;
		 	}

		  .site-slide-article{
		  	width: 100%;
		  	margin-top: -125rem;
		  	margin-left: 30rem;

		  }

		  .site-slide-article-titre{
		  	width: 100%;

		  }

		  .site-slide-article-titre h4{
		  	margin-bottom: 50rem;
		  	margin-top: 20rem;
		  }

		 .site-slide-article-titre h1{
		  	font-size: 60rem;
		  	margin-bottom: 10rem;
		  	padding-right: 30rem;
		  }
		  .site-slide-bg{
		  	  width: 200rem;
		  	  height: 66rem;
  			  top: 435rem;
		  }



		.site-slide-date{
			position: absolute;
			right: 80rem;
   			top: 435Rem;

			width: 114rem;
			height: 66rem;


		}
			.date-jour{
				flex-direction: row;
				align-items: center;
				justify-content: center;

				width: 114rem;
   				height: 66rem;

   				padding: 12rem 14rem;
			}

				.date-jour p{
					font-size: 27rem;
				}

				.date-1{
					position: relative;

					margin-bottom: 0rem;
					margin-right: 27rem;
				}
					.date-1::after{
						top: 3rem;
						left: 23rem;
						transform: rotate(270deg);
					}

					.date-1.skin1::after{
						left: 29rem
					}

				.date-mois{
					margin-left: 10rem;
					margin-top: 5rem;
				}


/*     SLIDE     */
.site-slide-show{
	padding-top: 0rem;
	height: auto;
}

.slide-show-first{
	height: auto;
	margin-bottom: 10rem;
}


	.site-agenda{
		display: none;
	}
		.submenu-agenda{
			display: none;
		}

	.site-presentation{
		height: 1930rem;
		}

	.site-presentation-allcontent{
		width: 100%;
		padding-top: 0rem;
		}


		.site-presentation-img{
			width: 100%;
			margin-left: auto;
  			margin-right: auto;
			overflow: hidden;


		}

			.site-presentation-img img{
				transform: translateX(-250rem);
			}

		.site-presentation-item{
			flex-wrap: wrap;
			height: auto;
			margin-bottom: 0rem;
		}

		.site-presentation-content{
			width: 100%;
			position: relative;
			top: 0;
			left: 0;
			min-height: auto;

		}

			.site-presentation-content.color1{
				padding: 20rem 30rem 20rem 30rem;
				background-color: #019BA4;
			}

			.site-presentation-content.color2{
				top: 0;
				left: 0;
				padding: 20rem 30rem 20rem 30rem;
			}
			
			.site-presentation-content.color3{
				padding: 20rem 30rem 20rem 30rem;
			}

  .site-abonnement{
  	height: auto;
  }

	.abonnement-content h1{
		width: 100%;
		height: auto;
		text-align: center;
		margin-bottom: 40rem;

	}	

		.abonnement-content p{
			width: 314rem;
			height: auto;
			margin-bottom: 50rem;

	      }



	.slide-artist-content{
		width: 100%;
		overflow: hidden;
	}

		.slide-artist-text{
			width: 100%;
			margin: 0rem 0rem 0rem 30rem;
			padding-right: 40rem;
		}

		.slide-artist{
			background-position: 60%;
		}

	.site-actu{
		display: flex;
		flex-direction: column;
		height: auto;
		width: 100%;
		padding: 68rem 0 0 0;
	}

		.site-actu-titre{
			width: 100%;
			margin-bottom: 48rem;
			padding: 0rem 30rem 0rem 30rem;
		}

		.actu-content{
			flex-direction: column;
		}
			.actu-text-content{
				padding: 0 30rem 0 30rem;
			}

		.article-content{
			width: 100%;
			margin-bottom: 51rem;
		}

			.article-img {
				width: 100%;
				overflow: hidden;
			}

	.site-news-letter{
		height: 270rem;
		overflow: hidden;

	}
		.site-news-letter-titre{
			height: auto;
			padding: 0 30rem 0 30rem;
		}

		.site-news-letter-content{
			width: 100%;
		}
			.site-news-letter-content p{
				width: 100%;
				padding: 0 30rem 0 30rem;
			}

			.form-newsletter-field {
				width: 246rem;
			}

			.form-newsletter{
				width: 100%;
				text-align: center;
			}


	.site-footer-content-nav{
		width: 100%;
		height: auto;

	}

		.site-nav-footer-item{
			display: flex;
	  		flex-wrap: wrap;
	  		margin-bottom: 20rem;
		}

		.site-nav-footer-item li {
			margin: 10rem 28rem 10rem 28rem;
		}




	h1{
	font-family: poppins, sans-serif;
	font-weight: 700;
	font-size: 40rem;
	text-transform: uppercase;

	margin-bottom: 10rem;
	}

	.lien-article-presentation{
		margin-top: 10rem;
		border-bottom: 1.5rem solid white;
	}

	.lien-article-presentation-actu{
		margin-top: 10rem;
		border-bottom: 1.5rem solid black;
	}

	}




